<template>
    <div class="track-container">
        <div class="filter-box">
            <div class="filter-left">
                <span>岗位：</span>
                <el-select v-model="condition.post" placeholder="请选择" size="mini" clearable>
                    <el-option v-for="item in postOptions" :label="item.name" :value="item.id"
                               :key="item.id"></el-option>
                </el-select>
            </div>
        </div>
        <!-- 表格 -->
        <el-table
            v-loading="loading"
            stripe
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
            height="100%"
            :data="tableData"
        >
            <el-table-column type="selection" width="55" fixed="left"></el-table-column>
            <el-table-column label="账户" prop="username" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="姓名" prop="fullName" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="性别" prop="fullName" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="人员名称" prop="fullName" min-width="120" show-overflow-tooltip></el-table-column>
            <el-table-column label="主管" prop="fullName" min-width="120" show-overflow-tooltip></el-table-column>
            <el-table-column label="状态" prop="fullName" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column label="区域" prop="fullName" min-width="120" show-overflow-tooltip></el-table-column>
            <el-table-column label="所属标签" prop="fullName" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="desc" label="备注" show-overflow-tooltip min-width="240"></el-table-column>
            <el-table-column label="操作" fixed="right" width="120" align="center">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="查看轨迹" placement="bottom-start">
                        <el-button type="danger" size="mini" icon="el-icon-edit"
                                   @click="handleOpenUpdateDialog(scope.row)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="page-block">
            <el-pagination @current-change="handleCurrentChange" :current-page="pageNo" :page-size="pageSize"
                           layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <div class="track-map-container">
            <h1>人员历史轨迹图</h1>
            <Map class="map"></Map>
        </div>
    </div>
</template>
<script>
import Map from './map2'

export default {
    components: { Map },
    data() {
        return {
            condition: {
                post: ''
            },
            postOptions: [],
            tableData: [],
            loading: false,
            pageSize: 10,
            pageNo: 1,
            total: 0
        }
    },
    methods: {
        handleCurrentChange(pageNo) {
            this.pageNo = pageNo
        },
        handleOpenUpdateDialog(row) {

        }
    }
}
</script>
<style lang='scss' scoped>
.track-map-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f2f5;
    z-index: 3;

    h1 {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        padding: 20px 0;
    }

    .map {
        height: calc(100% - 64px);
        overflow: hidden;
    }
}
</style>
